<template>
  <div class="home">
    <nav-bar :title="title"></nav-bar>
    <div class="swiper">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="box">
      <div class="toSee">
      </div>
      <div>
        <van-button color="#0bbef5" @click="toSee">附近有{{carNum}}辆车，去开车</van-button>
      </div>
      <div class="bottom">
        <router-link to="/rules">
          <span>计价规则</span>
        </router-link>
        <router-link to="/part">
          <span>停车区</span>
        </router-link>
      </div>
    </div>
    <div class="card">
      <div class="title">
        <p>优惠购卡</p>
        <p @click='myCard' v-if="this.userInfo !== null">您有{{couponNum}}张驾驶卡<van-icon name="arrow" /></p>
      </div>
      <div class="contain" @click="buyCard">
        <div class="left">
          <p>
            {{coupon.title}}
          </p>
          <p>
            {{coupon.newMoney}}
            <del>{{coupon.oldMoney}}</del>
          </p>
        </div>
        <div class="img">
          <img src="@/assets/car.png" alt="">
        </div>
      </div>
    </div>
    <div class="image" @click="toAdvertisement">
      <img src="@/assets/ad.jpg" alt="">
    </div>
    <div class="image" @click="toPart">
      <img src="@/assets/part.jpg" alt="">
    </div>
    <van-popover
      v-model="showPopover"
      trigger="click"
      :actions="actions"
      @select="onSelect"
      placement="right"
      v-if="isDriving"
    >
      <template #reference>
        <van-button type="primary">立即还车</van-button>
      </template>
    </van-popover>
    <tabs></tabs>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import NavBar from '@/components/NavBar/index'
import Tabs from '@/components/Tabs'
import { getAllCars } from '@/api/car'
import { getCoupon } from '@/api/coupon'
import { myCoupon, pay } from '@/api/mine'
import { using } from '@/api/user'

export default {
  name: 'Home',
  components: {
    NavBar,
    Tabs
  },
  data () {
    return {
      title: '首页',
      images: [
        'https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1985669123.jpg',
        'https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1985676771.jpg'
      ],
      carNum: 0,
      location: {},
      position: [],
      coupon: {},
      couponNum: 0,
      isDriving: false,
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: '立即支付' }, { text: '稍后支付' }],
      carId: 0,
      money: 0
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  mounted () {
    var _this = this
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        // locationSuccess 获取成功的话
        function (position) {
          _this.getLongitude = position.coords.longitude
          _this.getLatitude = position.coords.latitude
          console.log(_this.getLongitude) // 弹出经度测试
          console.log(_this.getLatitude)
        },
        // locationError  获取失败的话
        function (error) {
          var errorType = ['您拒绝共享位置信息', '获取不到位置信息', '获取位置信息超时']
          console.log(errorType[error.code - 1])
        }
      )
    }
  },
  created () {
    this.getCar()
    this.getLngLat()
    this.getCoupon()
    if (this.userInfo !== null) {
      this.getMyCoupon()
      this.getIsDriving()
    }
    this.carNum = this.position.length
  },
  methods: {
    async getMyCoupon () {
      const params = {
        userId: this.userInfo.userId
      }
      const { data: res } = await myCoupon(params)
      let count = 0
      console.log(res)
      if (res.data !== null) {
        res.data.forEach(item => {
          if (item.effective === false) {
            count = count + 1
          }
        })
        this.couponNum = count
      }
    },
    async getCar () {
      console.log(111)
      const { data: res } = await getAllCars({})
      this.carNum = res.rows.length
    },
    async getCoupon () {
      const { data: res } = await getCoupon({})
      this.coupon = res.rows[0]
    },
    async getIsDriving () {
      const params = {
        userId: this.userInfo.userId
      }
      const { data: res } = await using(params)
      console.log(res)
      if (res.data !== null) {
        this.carId = res.data.id
        this.isDriving = true
      } else {
        this.isDriving = false
      }
    },
    async onSelect (action) {
      // console.log(action)
      // this.$toast(action.text)
      console.log(111)
      if (action.text === '立即支付') {
        // 将当前车辆放入待支付
        this.$router.push({
          path: '/pay',
          query: {
            carId: this.carId
          }
        })
      } else if (action.text === '稍后支付') {
        const params = {
          payFlag: '0',
          couponId: this.radio,
          userId: this.userInfo.userId,
          carId: parseInt(this.carId),
          curFlag: '0'
        }
        const { data: res } = await pay(params)
        console.log(res)
        this.getIsDriving()
      }
    },
    async toPay () {
      const params = {
        payFlag: '0',
        couponId: this.radio,
        userId: this.userInfo.userId,
        carId: parseInt(this.carId),
        curFlag: '1'
      }
      const { data: res } = await pay(params)
      this.money = res.data.money
      console.log(this.money)
    },
    getLngLat () {
      this.location = {
        lng: 101.725767,
        lat: 26.568038
      }
    },
    toSee () {
      this.$router.push('./order')
    },
    toPart () {
      this.$router.push('./partDetail')
    },
    toAdvertisement () {
      this.$router.push('./advertisement')
    },
    myCard () {
      this.$router.push({
        path: '/myCard',
        query: {
          userId: 1
        }
      })
    },
    buyCard () {
      this.$router.push({
        path: '/buyCard',
        query: {
          userId: 1
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.swiper{
  height: 20%;
  width: 100%;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.van-swipe-item{
  img{
    height: 200px;
    width: 100%;
  }
}
.box{
  width: 90%;
  height: 160px;
  margin: 10px 5%;
  border-radius: 5px;
  box-shadow: 0 0 10px gray;
  position: relative;
  .toSee{
    height: 50px;
    width: 100%;
    span{
      line-height: 50px;
      font-weight: bolder;
      padding-left: 20px;
    }
  }
  .van-button{
    width: 80%;
    margin-left: 10%;
    border-radius: 5px;
  }
  .bottom{
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 0px;
    background-color: #abdcfa;
    line-height: 50px;
    border-radius: 5px;
    display: none;
    span{
     color: #fff;
    }
  }
}
.img{
  padding: 20px;
  img{
    height: 200px;
    width: 100%;
  }
}
.image{
  width: 100%;
  height: 150px;
  img{
    width: 100%;
    height: 100%;
  }
}
.card{
  width: 90%;
  height: 100px;
  margin: 10px 5%;
  border-radius: 5px;
  background: #87cefa;
  position: relative;
  .title{
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-between;
    p{
      margin: 0 10px;
      line-height: 30px;
      color: rgb(97, 96, 96);
    }
  }
  .contain{
    width: 90%;
    height: 60px;
    background: #fff;
    position: absolute;
    left: 5%;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    p{
      font-size: 14px;
      margin: 5px 20px;
      del{
        color: #ccc;
        font-size: 12px;
      }
    }
    img{
      height: 50px;
      width: 50px;
      margin-top: -13px;
    }
  }
}
.van-popover__wrapper{
  position: absolute;
  top: 235px;
  left: 8px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #abdcfa;
  .van-button{
    height: 50px;
    width: 50px;
    border-radius: 50%!important;
    background: #fff;
    box-shadow: 0 0 10px #abdcfa;
    .van-button__content{
      width: 50px;
      .van-button__text{
        width: 100%;
        font-weight: 200;
        font-size: 12px;
        color: #39a9ed;
        word-wrap: break-word;
        display: block;
        margin-left: -30px;
      }
    }
  }
}
</style>
